<template>
	<view class="container">
		<u-sticky>
			<u-navbar leftText="" title="电子相册" :safeAreaInsetTop="true" :placeholder="true">
				<view class="u-nav-slot" slot="left" @click="goBack()">
					<u-icon name="arrow-left" size="19"></u-icon>
				</view>
				<view class="u-nav-slot" slot="right" @click="selectedNavbar()">
					{{isShowBottomActionBar?'取消':'选择'}}
				</view>

				<!-- <view class="u-nav-slot" slot="right" v-show="activeTab === 'album'" @click="selectedNavbar()">
					{{isShowBottomActionBar?'取消':'选择'}}
				</view> -->
			</u-navbar>

			<view class="" style="background-color: #fff;">
				<view class="container-tabs">
					<view class="tab-item" :class="{ 'active': activeTab === 'all' }" @click.stop="switchTab('all')">
						<view class="tab-item-image">
							<image src="/static/user-album/AllPhotos.png" mode=""></image>
						</view>
						<view class="tab-item-text">所有照片</view>
					</view>

					<view class="tab-item" :class="{ 'active': activeTab === 'album' }"
						@click.stop="switchTab('album')">
						<view class="tab-item-image">
							<image src="/static/user-album/AllPhotos.png" mode=""></image>
						</view>
						<view class="tab-item-text">相册</view>
					</view>
				</view>
			</view>
		
		</u-sticky>
		<view class="container-content" v-show="activeTab === 'all'">
			<!-- 全部展示，照片墙形式 （无法实现定位滚动）-->
			<!-- 	<u-album v-show="selected === 'all'" :urls="albumUrls" :singleSize="singleSizeWidth"
				:multipleSize="multipleSizeWidth" space="6" :maxCount="albumUrls.length"></u-album> -->
			<view v-show="selected === 'all'" class="all-container">
				<view class="all-images-container">
					<image v-for="(url, index) in albumUrls" :key="index" :id="`all-image-${index}`" :src="url"
						mode="aspectFill" class="all-image"
						:class="{ 'target-image': targetImageUrl && targetImageUrl === url }"
						@click="previewImage(url, albumUrls)">
					</image>
				</view>
			</view>

			<!-- 按年分组，轮播展示 -->
			<view v-show="selected === 'year'" class="year-container">
				<view v-for="(images, year) in groupedByYear" :key="year" class="year-section">
					<view class="swiper-container">
						<u-swiper :list="images" mode="rect" height="220" radius="10" indicator indicatorMode="line"
							:autoplay="true" :indicator="false" @change="e => handleSwiperChange(e, year)"
							@click="() => handleSwiperClick(year, images)">
							<template #default="{ item }">
								<image :src="item.url" mode="aspectFill" class="swiper-image"></image>
							</template>
						</u-swiper>
						<!-- 年份标题，固定在左上角 -->
						<view class="year-title-overlay">{{ year }}年</view>
						<!-- 月份信息 -->
						<view class="month-title-overlay" v-if="images.length > 0">
							{{ getMonthFromDate(images[currentSwiperIndex[year] || 0].createTime) }}
						</view>
					</view>
				</view>
			</view>

			<!-- 按年展示图片。每年只展示一张 -->
			<!-- 	<view v-show="selected === 'year'" class="year-container">
				<view v-for="(img, year) in groupedByYear" :key="year" class="year-section">
					<view class="year-title">{{ year }}年</view>
					<view class="image-item">
						<image :src="img" mode="aspectFill" class="year-image"></image>
					</view>
				</view>
			</view> -->

			<!-- 按月份分组 -->
			<view v-show="selected === 'month'" class="month-container">
				<view v-for="(item, yearMonth) in groupedByMonth" :key="yearMonth" :id="`month-${yearMonth}`"
					class="month-section">
					<!-- 年月标题 -->
					<view class="year-month-title">{{ item.year }}年{{ item.month }}月</view>
					<!-- 根据图片数量选择展示方式 -->
					<view class="month-content" :class="getImageDisplayType(item.images.length)">
						<!-- 单张或两张图片 -->
						<view v-if="getImageDisplayType(item.images.length) === 'single'" class="single-layout">
							<image :src="item.images[0].url" mode="aspectFill" class="single-image"
								@click="navigateToAllGroup(item.images[0], item.images)">
							</image>
						</view>

						<!-- 3的倍数：左边一张，右边两张 -->
						<view v-else-if="getImageDisplayType(item.images.length) === 'three'" class="three-layout">
							<view class="left-image">
								<image :src="item.images[0].url" mode="aspectFill" class="large-image"
									@click="navigateToAllGroup(item.images[0], item.images)">
								</image>
							</view>
							<view class="right-images">
								<image v-for="(image, index) in item.images.slice(1, 3)" :key="index" :src="image.url"
									mode="aspectFill" class="small-image"
									@click="navigateToAllGroup(image, item.images)">
								</image>
							</view>
						</view>

						<!-- 4的倍数：上面一张大图，下面三张小图 -->
						<view v-else-if="getImageDisplayType(item.images.length) === 'four'" class="four-layout">
							<view class="top-image">
								<image :src="item.images[0].url" mode="aspectFill" class="large-image"
									@click="navigateToAllGroup(item.images[0], item.images)">
								</image>
							</view>
							<view class="bottom-images">
								<image v-for="(image, index) in item.images.slice(1, 4)" :key="index" :src="image.url"
									mode="aspectFill" class="small-image"
									@click="navigateToAllGroup(image, item.images)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="container-footer">
				<view class="container-footer-item" :class="{ 'active': selected === 'year' }"
					@click.stop="selectedTab('year')">
					年
				</view>
				<view class="container-footer-item" :class="{ 'active': selected === 'month' }"
					@click.stop="selectedTab('month')">
					月
				</view>
				<view class="container-footer-item" :class="{ 'active': selected === 'all' }"
					@click.stop="selectedTab('all')">
					全部
				</view>
			</view>
		</view>

		<view class="container-content-album" v-show="activeTab === 'album'">
			<view class="album-grid">
				<!-- 添加相册项（固定不变） -->
				<view class="album-item add-album-item" @click="addAlbum">
					<view class="add-album-item-box">
						<view class="album-cover">
							<image src="/static/addAlbum.png" mode="aspectFill"></image>
						</view>
						<view class="album-name">添加相册</view>
					</view>
				</view>

				<!-- 动态相册列表 -->
				<view v-for="(album, index) in albumList" :key="index" class="album-item"
					@click="handleClickAlbumList(album)">
					<view class="album-cover">
						<image :src="album.coverImg" mode="aspectFill"></image>
						<view class="album-cover-mark" :class="{ 'pinned': album.pinned }">
							<view class="album-info">
								<view class="album-name">{{ album.typeName }}</view>
								<view class="album-count">{{ album.imgCount ? '（'+ album.imgCount+'）' : '（' + 0 +'）'}}张
								</view>
							</view>
						</view>
					</view>
					<view class="album-item-top" v-show="isShowBottomActionBar">
						<image v-show="album.selected" src="/static/tick.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="container-content-album-footer" v-show="isShowBottomActionBar">
				<view class="container-content-album-footer-item" @click="handleTo(1)">
					<view class="footer-item-image">
						<image src="/static/share.png" mode=""></image>
					</view>
					<view class="">
						分享
					</view>
				</view>
				<view class="container-content-album-footer-item" @click="handleTo(2)">
					<view class="footer-item-image">
						<image src="/static/fiexdTop.png" mode=""></image>
					</view>
					<view class="">
						置顶
					</view>
				</view>
				<view class="container-content-album-footer-item" @click="deleteAlbum()">
					<view class="footer-item-image">
						<image src="/static/delete.png" mode=""></image>
					</view>
					<view class="">
						删除
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="addAlbumPopup" mode="center" @close="closeAddAlbum" :round="20">
			<view class="addAlbumPopupStyle">
				<view>新增相册</view>

				<view class="addAlbumPopupStyle-input">
					<u--input placeholder="请输入相册名称" border="none" focus v-model="albumName"></u--input>
				</view>
				<view class="line">

				</view>
				<view class="addBtn">
					<view class="addBtn-left" @click="closeAddAlbum">
						取消
					</view>
					<view class="addBtn-middle"></view>
					<view class="addBtn-right" :class="{ 'active': albumName && albumName.trim() !== '' }"
						@click="addAlbumEmit(albumName)">
						保存
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOwnPostImages,
		getAlbumList,
		addAlbum,
		deleteImage
	} from '@/request/api.js'
	export default {
		data() {
			return {
				activeTab: 'all', // 默认激活"所有照片"标签
				selected: 'all', // 默认激活"所有照片"标签
				albumWidth: 0,
				urls2: [],
				singleSizeWidth: 180, //相册单图模式图片宽度
				multipleSizeWidth: 70, //相册多图模式图片宽度
				currentSwiperIndex: {}, // 年份轮播索引
				currentMonthSwiperIndex: {}, // 月份轮播索引
				targetImageUrl: '', // 用于存储需要定位的图片URL
				// 修改这里：使用对象来存储每个月份的高亮图片URL
				highlightedImageUrls: {
					single: {}, // 存储每个年月组合的单图高亮URL
					three: {}, // 存储每个年月组合的三图高亮URL
					four: {} // 存储每个年月组合的四图高亮URL
				},
				// 相册模块
				albumList: [{
						name: "我的旅行",
						cover: "https://img0.baidu.com/it/u=112373598,2790689966&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						count: 25,
						pinned: true
					},
					{
						name: "家庭聚会",
						cover: "https://img2.baidu.com/it/u=488380279,3178563546&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
						count: 18,
						pinned: true
					},
					{
						name: "工作记录",
						cover: "https://img2.baidu.com/it/u=1072671224,465755646&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083",
						count: 32,
						pinned: false
					}
				],
				isShowBottomActionBar: false,
				addAlbumPopup: false,
				albumName: ''
			}
		},
		computed: {
			// 提取图片URL数组供u-album使用
			albumUrls() {
				return this.urls2.map(item => item.fileUrl);
			},

			// 按年份分组的图片数据，每年展示所有照片
			groupedByYear() {
				const grouped = {};
				// 按时间倒序排列
				const sortedUrls = [...this.urls2].sort((a, b) =>
					new Date(b.createTime) - new Date(a.createTime)
				);

				sortedUrls.forEach(item => {
					// 从 createTime 提取年份
					const year = new Date(item.createTime).getFullYear();
					if (!grouped[year]) {
						grouped[year] = [];
					}
					// 保存完整信息，包括图片URL和创建时间
					grouped[year].push({
						url: item.fileUrl,
						createTime: item.createTime
					});
				});

				// 按年份倒序排列
				return Object.keys(grouped)
					.sort((a, b) => b - a)
					.reduce((obj, key) => {
						obj[key] = grouped[key];
						return obj;
					}, {});
			},

			// 按年份分组的图片数据，每年只展示一张照片
			// groupedByYear() {
			// 	const grouped = {};
			// 	this.urls2.forEach(item => {
			// 		// 从 createTime 提取年份
			// 		const year = new Date(item.createTime).getFullYear();
			// 		// 每年只保存第一张照片
			// 		if (!grouped[year]) {
			// 			grouped[year] = item.imgurl;
			// 		}
			// 	});
			// 	return grouped;
			// }

			// 按月份分组的图片数据
			groupedByMonth() {
				const grouped = {};

				// 按时间倒序排列
				const sortedUrls = [...this.urls2].sort((a, b) =>
					new Date(b.createTime) - new Date(a.createTime)
				);

				sortedUrls.forEach(item => {
					// 从 createTime 提取年份和月份
					const date = new Date(item.createTime);
					const year = date.getFullYear();
					const month = date.getMonth() + 1;
					// 格式化为 "YYYY-MM" 作为键
					const yearMonth = `${year}-${month.toString().padStart(2, '0')}`;

					if (!grouped[yearMonth]) {
						grouped[yearMonth] = {
							year: year,
							month: month,
							images: []
						};
					}

					// 保存完整信息
					grouped[yearMonth].images.push({
						url: item.fileUrl,
						createTime: item.createTime
					});
				});

				// 如果有高亮图片需要置顶，则调整顺序
				Object.keys(this.highlightedImageUrls.single).forEach(yearMonth => {
					const highlightedUrl = this.highlightedImageUrls.single[yearMonth];
					if (grouped[yearMonth]) {
						const images = grouped[yearMonth].images;
						const highlightIndex = images.findIndex(img => img.url === highlightedUrl);
						if (highlightIndex > -1) {
							// 将高亮图片移到第一位
							const [highlightedImg] = images.splice(highlightIndex, 1);
							images.unshift(highlightedImg);
						}
					}
				});

				Object.keys(this.highlightedImageUrls.three).forEach(yearMonth => {
					const highlightedUrl = this.highlightedImageUrls.three[yearMonth];
					if (grouped[yearMonth]) {
						const images = grouped[yearMonth].images;
						const highlightIndex = images.findIndex(img => img.url === highlightedUrl);
						if (highlightIndex > -1) {
							// 将高亮图片移到第一位
							const [highlightedImg] = images.splice(highlightIndex, 1);
							images.unshift(highlightedImg);
						}
					}
				});

				Object.keys(this.highlightedImageUrls.four).forEach(yearMonth => {
					const highlightedUrl = this.highlightedImageUrls.four[yearMonth];
					if (grouped[yearMonth]) {
						const images = grouped[yearMonth].images;
						const highlightIndex = images.findIndex(img => img.url === highlightedUrl);
						if (highlightIndex > -1) {
							// 将高亮图片移到第一位
							const [highlightedImg] = images.splice(highlightIndex, 1);
							images.unshift(highlightedImg);
						}
					}
				});

				// 按年月倒序排列
				return Object.keys(grouped)
					.sort((a, b) => b.localeCompare(a))
					.reduce((obj, key) => {
						obj[key] = grouped[key];
						return obj;
					}, {});
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.windowWidth;
			this.singleSizeWidth = screenWidth - 30
			this.multipleSizeWidth = (screenWidth - 42) / 3
			this.getAlbumUrls()
			this.getAlbumListRequest()
		},
		methods: {
			// 删除相册
			deleteAlbum() {
				// 筛选出选中的相册ID并拼接
				const selectedIds = this.albumList
					.filter(item => item.selected)
					.map(item => item.id)
					.join(',');

				const selectedNames = this.albumList.filter(item => item.selected).map(item => item.typeName).join('、');
				if (selectedIds) {
					console.log('选中的ID:', selectedIds);
					let that = this
					uni.showModal({
						title: '提示',
						content: '您确定要删除' + selectedNames + '吗？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// 调用删除接口
								deleteImage({
									ids: selectedIds
								}).then(res => {
									if (res.data.code == 200) {
										that.isShowBottomActionBar = false
										that.getAlbumListRequest()
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										});
									} else {
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										});
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showToast({
						title: '请选择要删除的相册',
						icon: 'none'
					});
				}
			},
			// 获取照片
			getAlbumUrls() {
				let params = {
					userId: this.$store.state.userInfo.userId,
					pageNum: 1,
					pageSize: 100
				}
				getOwnPostImages(params).then((res => {
					this.urls2 = res.data.rows
				}))
			},
			// 获取相册列表
			getAlbumListRequest() {
				let params = {
					userId: this.$store.state.userInfo.userId,
					pageNum: 1,
					pageSize: 10000
				}
				getAlbumList(params).then((res => {
					this.albumList = res.data.rows
				}))
			},
			goBack() {
				uni.navigateBack()
			},
			selectedNavbar() {
				// 当头部tabs为相册的时候，点击选择 显示底部操作栏。当操作栏显示的时候，不能切换tab
				this.isShowBottomActionBar = !this.isShowBottomActionBar
			},
			// 切换头部的tabs  所有照片  or 相册
			switchTab(tab) {
				if (this.isShowBottomActionBar == true) return
				this.activeTab = tab;
				// 在这里可以添加切换标签后的逻辑
			},
			selectedTab(tab) {
				this.selected = tab;
				// 在这里可以添加切换标签后的逻辑
			},
			// 获取月份信息
			getMonthFromDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return (date.getMonth() + 1) + '月';
			},
			// 处理轮播图切换事件
			handleSwiperChange(e, year) {
				this.$set(this.currentSwiperIndex, year, e.current);
			},
			// 根据图片数量确定展示方式
			getImageDisplayType(imageCount) {
				if (imageCount <= 2) {
					return 'single'; // 单张展示
				} else if (imageCount % 3 === 0) {
					return 'three'; // 3的倍数：左边一张，右边两张
				} else if (imageCount % 4 === 0) {
					return 'four'; // 4的倍数：上面一张大图，下面三张小图
				} else {
					return 'single'; // 默认单张展示
				}
			},
			// 获取需要展示的图片列表（根据展示方式）
			getDisplayImages(images, displayType) {
				if (displayType === 'single') {
					// 只展示第一张
					return images.slice(0, 1);
				} else if (displayType === 'three') {
					// 展示所有图片
					return images;
				} else if (displayType === 'four') {
					// 展示所有图片
					return images;
				}
				return images.slice(0, 1);
			},
			// 图片预览功能
			previewImage(currentUrl, urls) {
				uni.previewImage({
					current: currentUrl,
					urls: urls
				});
			},
			// 处理轮播图点击事件
			handleSwiperClick(year, images) {
				// 获取当前显示的图片索引
				const currentIndex = this.currentSwiperIndex[year] || 0;
				const currentItem = images[currentIndex];

				if (currentItem) {
					this.navigateToMonthGroup(currentItem, year);
				}
			},

			// 跳转到月份分组并定位到对应图片
			navigateToMonthGroup(imageItem, year) {
				console.log('点击图片:', imageItem, '年份:', year);
				// 1. 找到点击图片对应的月份
				const date = new Date(imageItem.createTime);
				const month = date.getMonth() + 1;
				const yearMonth = `${year}-${month.toString().padStart(2, '0')}`;
				// 2. 切换到月份tab
				this.selected = 'month';
				this.getCurrentClickImageIndex(yearMonth, imageItem)


				// 3. 延迟执行滚动定位，确保DOM已更新
				this.$nextTick(() => {
					setTimeout(() => {
						// 4. 滚动到对应的月份区域 (添加前缀)
						this.scrollToMonth(`month-${yearMonth}`);
					}, 300);
				});
			},
			// 获取当前点击的图片所在分组的下标
			getCurrentClickImageIndex(yearMonth, imageItem) {
				// 获取对应月份的数据
				const monthData = this.groupedByMonth[yearMonth];
				if (!monthData) return false;

				// 检查图片是否在该月份中
				const imageIndex = monthData.images.findIndex(img => imageItem.url === img.url);
				if (imageIndex === -1) return false;

				// 根据展示类型设置对应月份的高亮图片
				const displayType = this.getImageDisplayType(monthData.images.length);

				// 使用 $set 确保响应式更新
				this.$set(this.highlightedImageUrls[displayType], yearMonth, imageItem.url);

				console.log(`设置 ${yearMonth} 月份的 ${displayType} 类型高亮图片:`, imageItem.url);
				return true;
			},

			// 滚动到指定月份
			scrollToMonth(yearMonth) {
				console.log('开始滚动到:', yearMonth);
				// 使用uni.createSelectorQuery获取元素位置并滚动
				const query = uni.createSelectorQuery().in(this);
				query.select(`#${yearMonth}`).boundingClientRect(res => {
					console.log('找到元素:', res);
					if (res) {
						// 获取页面滚动位置
						uni.createSelectorQuery().selectViewport().scrollOffset(scrollRes => {
							if (scrollRes) {
								const scrollTop = scrollRes.scrollTop + res.top - 100;
								console.log('滚动到位置:', scrollTop);
								uni.pageScrollTo({
									scrollTop: scrollTop,
									duration: 300
								});
							}
						}).exec();
					} else {
						console.log('未找到元素');
					}
				});
				query.exec();
			},
			// 跳转到全部分组并定位到指定图片
			navigateToAllGroup(imageItem, allImagesInMonth) {
				console.log('点击月份分组图片:', imageItem);

				// 1. 切换到全部tab
				this.selected = 'all';

				// 2. 保存需要定位的图片信息
				this.targetImageUrl = imageItem.url;

				// 3. 延迟执行滚动定位，确保DOM已更新
				this.$nextTick(() => {
					setTimeout(() => {
						// 4. 滚动到指定图片位置
						this.scrollToImageInAllGroup(imageItem.url);
					}, 300);
				});
			},

			// 在全部分组中滚动到指定图片位置
			scrollToImageInAllGroup(targetImageUrl) {
				// 查找图片在全部列表中的索引
				const imageIndex = this.albumUrls.indexOf(targetImageUrl);
				if (imageIndex === -1) {
					console.log('未找到目标图片');
					return;
				}

				console.log('图片索引:', imageIndex);

				// 延迟执行滚动，确保DOM已更新
				this.$nextTick(() => {
					setTimeout(() => {
						// 使用ID查询具体图片元素位置
						const query = uni.createSelectorQuery().in(this);
						query.select(`#all-image-${imageIndex}`).boundingClientRect(rect => {
							if (rect) {
								console.log('目标图片位置信息:', rect);

								// 获取视口信息
								uni.createSelectorQuery().selectViewport().scrollOffset(
									scrollRes => {
										if (scrollRes) {
											// 获取屏幕高度
											const systemInfo = uni.getSystemInfoSync();
											const screenHeight = systemInfo.windowHeight;

											// 计算使图片居中的滚动位置
											const scrollTop = scrollRes.scrollTop + rect.top -
												(screenHeight / 2) + (rect.height / 2);

											uni.pageScrollTo({
												scrollTop: scrollTop,
												duration: 300
											});

											// 设置目标图片高亮显示
											this.targetImageUrl = targetImageUrl;

											// 3秒后清除高亮
											setTimeout(() => {
												this.targetImageUrl = '';
											}, 3000);
										}
									}).exec();
							} else {
								console.log('未找到目标图片元素');
							}
						});
						query.exec();
					}, 100);
				});
			},
			// 添加相册打开弹框
			addAlbum() {
				if (this.isShowBottomActionBar) return
				this.addAlbumPopup = true
				// 这里可以添加具体的添加相册逻辑
			},
			// 添加相册提交请求
			addAlbumEmit(albumName) {
				let params = {
					userId: this.$store.state.userInfo.userId,
					typeName: albumName,
				}
				if (albumName && albumName.trim() !== '') {
					addAlbum(params).then((res => {
						console.log(res);
						if (res.data.code == 200) {
							this.addAlbumPopup = false
							uni.showToast({
								icon: 'none',
								title: '添加成功'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}))
				}
			},
			openAddAlbum() {
				this.albumName = ''
			},
			closeAddAlbum() {
				this.albumName = ''
				this.addAlbumPopup = false
				// console.log('close');
			},
			handleTo(num) {
				switch (num) {
					case 1: //分享
						uni.showToast({
							title: '分享',
							icon: 'none'
						});
						break;
					case 2: //置顶
						uni.showToast({
							title: '置顶',
							icon: 'none'
						});
						break;
					case 3: //删除
						uni.showToast({
							title: '删除',
							icon: 'none'
						});
						break;
				}
			},
			// 头部相册tabs选中的时候点击图片
			// 这里需要两层处理。第一层。没有点击选择，直接打开相册中的照片
			// 				第二次，点击了选择，是对相册的勾选状态处理
			handleClickAlbumList(item) {
				if (this.isShowBottomActionBar) {
					// 处理勾选状态 - 切换选中状态
					const index = this.albumList.findIndex(album => album === item);

					if (index !== -1) {
						// 直接切换状态
						this.$set(this.albumList[index], 'selected', !this.albumList[index].selected);
					}
				} else {
					let urls = item.clientFileList.map(item => item.fileUrl);
					uni.setStorageSync('albumPicture', urls)
					// 打开相册中的照片
					uni.navigateTo({
						url: '/pages_sub/user/album/album-detail?name=' + item.typeName
					})
					// 这里可以添加打开相册详情页的逻辑
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		margin: 0 30rpx;


		.container-tabs {
			height: 100rpx;
			border-radius: 40rpx;
			background-color: rgba(235, 235, 235, 1);
			display: flex;
			text-align: center;

			.tab-item {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				margin: 10rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				background-color: transparent; // 默认背景透明
				transition: background-color 0.3s; // 添加过渡效果
				font-weight: 400;

				&.active {
					background-color: #fff; // 激活状态背景为白色
					font-weight: 800;
				}

				&-image {
					width: 40rpx;
					margin-right: 12rpx;
					margin-top: 10rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				&-text {
					color: rgba(41, 41, 48, 1);
					font-size: 26rpx;
				}
			}
		}

		.container-content {
			margin-top: 40rpx;
			padding-bottom: 40rpx;

			.album {
				@include flex;
				align-items: flex-start;

				&__avatar {
					background-color: $u-bg-color;
					padding: 5px;
					border-radius: 3px;
				}

				&__content {
					margin-left: 10px;
					flex: 1;
				}
			}

			// 按年展示，每年只展示一张
			// .year-container {
			// 	.year-section {
			// 		margin-bottom: 30rpx;

			// 		.year-title {
			// 			font-size: 32rpx;
			// 			font-weight: bold;
			// 			margin-bottom: 20rpx;
			// 			color: #333;
			// 		}

			// 		.image-item {
			// 			width: 100%;
			// 			margin-bottom: 20rpx;

			// 			.year-image {
			// 				width: 100%;
			// 				height: calc(100vw * 3 / 4); // 4:3 宽高比
			// 				border-radius: 10rpx;
			// 			}
			// 		}
			// 	}
			// }

			// 按年分组，轮播展示
			.year-container {
				.year-section {
					margin-bottom: 40rpx;

					.swiper-container {
						position: relative;
						border-radius: 10rpx;
						overflow: hidden;

						.swiper-image {
							width: 100%;
							height: 400rpx;
						}

						// 年份标题覆盖层样式
						.year-title-overlay {
							text-align: left;
							position: absolute;
							top: 20rpx;
							left: 20rpx;
							z-index: 20;
							color: white;
							font-size: 36rpx;
							line-height: 40rpx;
							font-weight: 700;
							padding: 10rpx 20rpx;
							text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
							// backdrop-filter: blur(10rpx);
						}

						.month-title-overlay {
							text-align: left;
							position: absolute;
							top: 70rpx;
							left: 20rpx;
							z-index: 20;
							color: white;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 30rpx;
							padding: 10rpx 20rpx;
							text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
							// backdrop-filter: blur(10rpx);
						}
					}
				}
			}

			// 按月份分组展示
			.month-container {
				.month-section {
					margin-bottom: 40rpx;

					// 年月标题样式
					.year-month-title {
						font-size: 36rpx;
						font-weight: 700;
						color: #333;
						margin-bottom: 20rpx;
						padding-left: 10rpx;
					}

					// 月份内容容器
					.month-content {
						border-radius: 10rpx;
						overflow: hidden;
						position: relative;

						// 单张图片布局
						&.single {
							.single-layout {
								position: relative;

								.single-image {
									width: 100%;
									height: 400rpx;
									border-radius: 10rpx;
								}
							}
						}

						// 三张图片布局（左边一张，右边两张）
						&.three {
							height: 440rpx;

							.three-layout {
								display: flex;
								height: 100%; // 占满容器高度

								.left-image {
									flex: 1;
									margin-right: 10rpx;

									.large-image {
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
								}

								.right-images {
									flex: 1;
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									.small-image {
										width: 100%;
										flex: 1;
										border-radius: 10rpx;
										margin-bottom: 10rpx;

										&:last-child {
											margin-bottom: 0;
										}
									}
								}
							}
						}

						// 四张图片布局（上面一张大图，下面三张小图）
						&.four {
							height: 660rpx; // 400rpx(大图) + 10rpx(间距) + 210rpx(小图) + 40rpx(上下padding) = 660rpx

							.four-layout {
								height: 100%;

								.top-image {
									height: 400rpx; // 大图高度

									.large-image {
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
								}

								.bottom-images {
									display: flex;
									justify-content: space-between;
									margin-top: 10rpx; // 添加顶部间距

									.small-image {
										width: 32%;
										height: 210rpx; // 小图高度
										border-radius: 10rpx;
									}
								}
							}
						}
					}
				}
			}

			// 全部
			.all-container {
				.all-images-container {
					display: flex;
					flex-wrap: wrap;

					// justify-content: space-between;
					.all-image {
						width: calc((100% - 20rpx) / 3);
						height: 200rpx;
						border-radius: 10rpx;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						margin-right: 10rpx;

						&:nth-child(3n) {
							margin-right: 0; // 每行第三个元素不需要右边距
						}

						&.target-image {
							border: 4rpx solid #FF452D;
							transform: scale(1.05);
							box-shadow: 0 0 20rpx #FF452D;
						}
					}
				}
			}

			.container-footer {
				position: fixed;
				width: calc(100% - 180rpx);
				bottom: 54rpx;
				left: 90rpx;
				height: 100rpx;
				border-radius: 40rpx;
				background-color: rgba(230, 230, 230, 0.65);
				display: flex;
				text-align: center;

				.container-footer-item {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					margin: 10rpx;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					background-color: transparent; // 默认背景透明
					transition: background-color 0.3s; // 添加过渡效果
					font-weight: 400;

					&.active {
						background-color: rgba(94, 94, 94, 0.8); // 激活状态背景为白色
						font-weight: 800;
						color: #fff;
					}
				}
			}
		}


		// 头部tabs---相册
		.container-content-album {
			margin-top: 40rpx;
			padding-bottom: 40rpx;

			.album-grid {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.album-item {
					width: calc(50% - 10rpx);
					height: 320rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #f5f5f5;
					position: relative; // 添加相对定位

					.album-cover {
						width: 100%;
						height: 320rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.album-cover-mark {
							position: absolute;
							bottom: 10rpx;
							left: 10rpx;
							width: calc(100% - 20rpx);
							background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景
							backdrop-filter: blur(10rpx);
							padding: 10rpx;
							box-sizing: border-box;
							border-radius: 40rpx;


							&.pinned {
								// border-radius: 0 0 40rpx 40rpx;
								backdrop-filter: blur(10rpx);

								&::before {
									content: '';
									position: absolute;
									top: -25rpx;
									left: 50%;
									transform: translateX(-50%);
									width: 130rpx;
									height: 25rpx;
									background-color: rgba(0, 0, 0, 0.5);
									backdrop-filter: blur(10rpx);

									// 使用渐变创建更平滑的波浪效果
									background-image: radial-gradient(ellipse at center,
											transparent 0%,
											transparent 100%,
											rgba(0, 0, 0, 0.5) 100%,
											rgba(0, 0, 0, 0.5) 100%);

									// 添加圆角使边缘更柔和
									border-radius: 50% 50% 0 0 / 100% 100% 0 0;
									// 使用mask创建更精确的波浪形状
									mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 25'%3E%3Cpath d='M0,25 C30,0 90,0 130,25 L130,25 L0,25 Z' fill='black'/%3E%3C/svg%3E");
									mask-size: 100% 100%;
								}

								// 调整内边距以适应波浪
								.album-info {
									// padding-top: 18rpx;	
								}
							}

							.album-info {
								display: flex;
								justify-content: center;

								.album-name {
									color: rgba(255, 255, 255, 1);
									font-size: 26rpx;
									line-height: 30rpx;
									font-weight: 700;
									text-align: center;
									margin-bottom: 5rpx;
								}

								.album-count {
									font-weight: 500;
									line-height: 30rpx;
									margin-left: 20rpx;
									color: rgba(255, 255, 255, 1);
									font-size: 26rpx;
									text-align: center;
								}
							}
						}
					}

					.album-item-top {
						position: absolute;
						width: 34rpx;
						height: 34rpx;
						right: 20rpx;
						top: 20rpx;
						border: 4rpx solid rgba(255, 255, 255, 1);
						border-radius: 50%;
						background-color: transparent;
						box-sizing: border-box;
						display: flex; // 添加flex布局
						justify-content: center; // 水平居中
						align-items: center; // 垂直居中

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.add-album-item {
					background-color: rgba(124, 124, 124, 1);
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.add-album-item-box {
						width: 120rpx;
						height: 100rpx;
						box-sizing: border-box;

						.album-cover {
							width: 56rpx;
							height: 48rpx;

							image {
								margin-left: 32rpx;
								width: 56rpx;
								height: 48rpx;
							}
						}

						.album-name {
							margin-top: 16rpx;
							width: 120rpx;
							text-align: center;
							color: rgba(255, 255, 255, 1);
							font-size: 30rpx;
							font-weight: 500;
							line-height: 40rpx;
							padding: 0;
						}
					}

				}
			}

			.container-content-album-footer {
				position: fixed;
				width: calc(100% - 180rpx);
				bottom: 54rpx;
				left: 90rpx;
				height: 130rpx;
				border-radius: 40rpx;
				background-color: rgba(103, 102, 102, 1);
				display: flex;
				justify-content: space-between;
				text-align: center;

				.container-content-album-footer-item {
					flex: 1; // 平均分配宽度
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 130rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: rgba(255, 255, 255, 1);

					.footer-item-image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 10rpx; // 图标和文字之间的间距

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}

		.addAlbumPopupStyle {
			width: 80vw;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
			padding-bottom: 20rpx;

			.addAlbumPopupStyle-input {
				margin: 10rpx 30rpx;
			}

			.line {
				border-bottom: 1px solid #0055ff;
				margin: 20rpx 30rpx 0;
			}

			.addBtn {
				display: flex;
				justify-content: space-between;
				width: 100%;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;

				.addBtn-left {
					width: 45%;
					color: #0055ff;
				}

				.addBtn-middle {
					width: 4rpx;
					color: #c5c5c5;
					height: 50rpx;
					background-color: #c5c5c5;
					margin-top: 15rpx;
				}

				.addBtn-right {
					width: 45%;

					// 激活状态样式
					&.active {
						color: #0055ff; // 激活颜色
					}
				}
			}
		}
	}
</style>